{{! @glint-nocheck: not typesafe yet }}
{{page-title "Authenticate"}}
{{set-body-class "secondary-screen"}}

<div
  class="relative flex min-h-full flex-1 flex-col items-center justify-center py-12"
>
  <div class="mx-auto w-full max-w-xl">
    <Hds::Card::Container
      @level="high"
      @hasBorder="true"
      @overflow="visible"
      class="relative flex w-full flex-col items-center px-20 pt-24 pb-32 text-center"
    >
      <HermesLogo class="mb-8" />
      <h1 class="mb-1.5">
        Welcome to Hermes.
      </h1>
      <p class="mb-8 text-display-300">
        Log in to browse, search, and manage documents
      </p>
      <Hds::Button
        @text="Authenticate with Google"
        @size="large"
        @icon="google"
        {{on "click" (perform this.authenticate)}}
      />

    </Hds::Card::Container>
    <Footer class="compact" />
  </div>
</div>

{{outlet}}
